<!--
 * @Author: xuzehan h935351619@163.com
 * @Date: 2024-07-23 17:06:40
 * @LastEditors: xuzehan h935351619@163.com
 * @LastEditTime: 2024-11-25 14:02:19
 * @FilePath: \linshi\src\views\ChannelMonitoring\components\latticeList.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <!-- :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" @change="handleTableChange" -->
    <div>
      <a-button :disabled="!(selectedRowKeys && selectedRowKeys.length > 0)" type="primary" style="margin-bottom: 10px;"
        >批量修改</a-button
      >
      <!--  :dataSource="paginatedData" -->
      <a-table
        :scroll="{ x: true }"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        @change="handleTableChange"
      >
        <template slot="pp" slot-scope="text, record">
          <span>{{ record.pp }}</span>
        </template>
        <template slot="xxsl" slot-scope="text, record">
          <span v-if="record.rowState && selectedRowKeys.includes(record.id)">
            <a-select placeholder="请选择信息速率" v-model="record.xxsl" :defaultValue="record.xxsl" style="width: 120px;">
              <a-select-option v-for="item in xxslList" :key="item.id" :value="item.content">{{
                item.content
              }}</a-select-option>
            </a-select>
          </span>
          <!-- <a v-if="!xxslSelect" @click="editXxsl(record)">{{ record.xxsl }}</a> -->
          <span v-if="!record.rowState">{{ record.xxsl }}</span>
          <span v-if="selectedRowKeys.includes(record.id)">
            <span class="a_icon">
              <a-tooltip>
                <template slot="title">编辑</template>
                <a-icon type="edit" @click="handleEditXxsl(record)" />
              </a-tooltip>
            </span>
            <span class="a_icon">
              <a-tooltip>
                <template slot="title">提交</template>
                <a-icon type="check" @click="handleCheckXxsl(record)" />
              </a-tooltip>
            </span>
          </span>
          <!-- <span>{{ record.xxsl }}</span>
        <a-button type="primary" style="margin-left: 8px;" @click="editXxsl(record)" :disabled="record.rowState">修改</a-button> -->
        </template>
      </a-table>
    </div>
    <!-- 分页控件 -->
    <!-- <div class="pagination-wrapper">
      <a-pagination
        v-model="currentPage"
        :total="totalItems"
        :pageSize="pageSize"
        :pageSizeOptions="['10', '20', '50']"
        show-size-changer
        show-quick-jumper
        show-total
        :showTotal="total => `共 ${total} 条记录`"
        @change="handlePageChange"
        @showSizeChange="handleSizeChange"
        style="color: white;"
      />
    </div> -->
    <a-modal
      :visible="visible"
      @cancel="visible = false"
      @ok="handleOk"
      title="设置通道信息速率"
      :destroyOnClose="true"
    >
      <j-form-container>
        <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
          <a-row>
            <a-col :span="24">
              <a-form-model-item label="通道编号" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input disabled :value="rowObj.tdh"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="信息速率" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="xxsl">
                <a-select placeholder="请选择信息速率" @change="xxslChange" :defaultValue="dataXxsl">
                  <a-select-option v-for="item in xxslList" :key="item.id" :value="item.content">{{
                    item.content
                  }}</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </j-form-container>
    </a-modal>
  </div>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { getAction } from '@/api/manage'
import { message } from 'ant-design-vue'
const columns = [
  {
    dataIndex: '',
    key: 'rowIndex',
    title: '序号',
    customRender: function(t, r, index) {
      return parseInt(index) + 1
    }
  },
  {
    dataIndex: 'tdh',
    key: 'tdh',
    title: '通道编号'
  },
  {
    title: 'EIRP(dBm)',
    dataIndex: 'eirp',
    key: 'eirp'
  },
  {
    title: '信噪比(dB)',
    dataIndex: 'xzb',
    key: 'xzb'
  },
  {
    title: '频偏(Hz)',
    key: 'pp',
    dataIndex: 'pp',
    scopedSlots: { customRender: 'pp' }
  },
  {
    title: '信息速率(bps)',
    key: 'xxsl',
    dataIndex: 'xxsl',
    scopedSlots: { customRender: 'xxsl' }
  },
  {
    title: '锁定时间',
    key: 'sjxx',
    dataIndex: 'sjxx'
  },
  {
    title: '同步字节错字数(个)',
    key: 'tbzjczs',
    dataIndex: 'tbzjczs'
  }
  // {
  //   title: 'Action',
  //   key: 'action',
  //   scopedSlots: { customRender: 'action' },
  // },
]

const data = []

export default {
  mixins: [JeecgListMixin],
  data() {
    return {
      xxslList: [
        { id: 1, content: '600bps' },
        { id: 2, content: '900bps' },
        { id: 3, content: '1800bps' }
      ],
      data,
      columns,
      url: {
        list: '/dcpr/dcprPassagewayInfo/list'
      },
      list: [],
      currentPage: 1,
      pageSize: 10,
      visible: false,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },

      validatorRules: {
        // xxsl: [{required: true, message: '请选择信息速率!'}]
      },
      dataId: '',
      dataXxsl: '',
      disabled: false,
      rowObj: {}, //保存当前行数据
      xxslSelect: false
    }
  },
  computed: {
    totalItems() {
      return this.list.length
    },
    paginatedData() {
      const start = (this.currentPage - 1) * this.pageSize
      const end = start + this.pageSize
      return this.list.slice(start, end)
    }
  },
  created() {
    for (let i = 1; i < 434; i++) {
      if (i > 400) {
        this.list.push({
          label: `国际通道`,
          id: i,
          tdh: i,
          status: Math.floor(Math.random() * (3 - 1 + 1)) + 1,
          eirp: 44,
          xzb: 15,
          PP: '-2',
          sjxx: '2021-07-16',
          tbzjczs: 0,
          xxsl: '600bps',
          rowState: false
        })
      } else {
        if (i < 60) {
          this.list.push({
            label: `国内通道`,
            id: i,
            tdh: i,
            status: Math.floor(Math.random() * (3 - 1 + 1)) + 1,
            eirp: 44,
            xzb: 15,
            PP: '-2',
            sjxx: '2021-07-16',
            tbzjczs: 0,
            xxsl: '900bps',
            rowState: false
          })
        } else if (i < 260) {
          this.list.push({
            label: `国内通道`,
            id: i,
            tdh: i,
            status: Math.floor(Math.random() * (3 - 1 + 1)) + 1,
            eirp: 44,
            xzb: 15,
            PP: '-2',
            sjxx: '2021-07-16',
            tbzjczs: 0,
            xxsl: '600bps',
            rowState: false
          })
        } else if (i < 361) {
          this.list.push({
            label: `国内通道`,
            id: i,
            tdh: i,
            status: Math.floor(Math.random() * (3 - 1 + 1)) + 1,
            eirp: 44,
            xzb: 15,
            PP: '-2',
            sjxx: '2021-07-16',
            tbzjczs: 0,
            xxsl: '900bps',
            rowState: false
          })
        } else if (i < 381) {
          this.list.push({
            label: `国内通道`,
            id: i,
            tdh: i,
            status: Math.floor(Math.random() * (3 - 1 + 1)) + 1,
            eirp: 44,
            xzb: 15,
            PP: '-2',
            sjxx: '2021-07-16',
            tbzjczs: 0,
            xxsl: '1800bps',
            rowState: false
          })
        }
      }
    }
  },
  mounted() {
    // this.getListData()
  },
  methods: {
    getListData() {
      getAction(this.url.list,{pageSize:20000}).then(res => {
        if (res.success) {
          this.dataSource = res.result.records
          // this.dataSource.forEach(item => {
          //   let index = this.list.findIndex(i => i.tdh == item.tdh)
          //   this.$set(this.list, index, item)
          // })
          // this.ipagination.total = this.list.length
          this.ipagination.total = res.result.total
          console.log('this.list', this.list)
          console.log('this.list', this.dataSource)
        }
      })
    },
    handlePageChange(page) {
      this.currentPage = page
      // 滚动到顶部
      this.$nextTick(() => {
        window.scrollTo(0, 0)
      })
    },
    handleSizeChange(current, size) {
      this.pageSize = size
      this.currentPage = 1
    },
    editXxsl(record) {
      this.dataId = record.id //选中的id
      this.dataXxsl = record.xxsl //选中的信息速率
      this.rowObj = record //选中行
      this.visible = true
      this.$forceUpdate()
    },
    handleOk() {
      let find = this.list.find(item => item.id == this.dataId)
      find.xxsl = this.dataXxsl
      this.visible = false
      this.rowObj.rowState = true
      setTimeout(() => {
        this.rowObj.rowState = false
      }, 60000)
    },
    xxslChange(val) {
      this.dataXxsl = val
    },
    handleEditXxsl(record) {
      console.log('record编辑', record.xxsl);
      this.xxslSelect = true
      record.rowState = true
    },
    handleCheckXxsl(record) {
      this.xxslSelect = false
      record.rowState = false
      console.log('record提交', record.xxsl);
      
    }
  }
}
</script>

<style scoped>
.pagination-wrapper {
  margin-top: 20px;
  text-align: right;
}
.a_icon {
  margin-left: 10px;
  cursor: pointer;
}
</style>
